<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XPath-CSS Finder 测试页面</title>
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }

        .container {
            border: 1px solid #ddd;
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 5px;
        }

        .btn {
            background-color: #4f46e5;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 10px;
        }

        .btn:hover {
            background-color: #4338ca;
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input,
        select {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }
    </style>
</head>

<body>
    <h1>XPath-CSS Finder 测试页面</h1>
    <p>使用此页面测试 XPath-CSS Finder 扩展。激活扩展并点击任何元素以生成 XPath 表达式。</p>

    <div class="container">
        <h2>表单元素</h2>
        <form id="testForm">
            <div class="form-group">
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username" placeholder="请输入用户名">
                <input type="text" id="username2" name="username2" placeholder="请输入用户名">

            </div>

            <div class="form-group">
                <label for="email">邮箱:</label>
                <input type="email" id="email" name="email" placeholder="请输入邮箱">
            </div>

            <div class="form-group">
                <label for="country">国家:</label>
                <select id="country" name="country">
                    <option value="">选择国家</option>
                    <option value="cn">中国</option>
                    <option value="us">美国</option>
                    <option value="jp">日本</option>
                    <option value="uk">英国</option>
                </select>
            </div>

            <button type="submit" class="btn">提交</button>
            <button type="reset" class="btn">重置</button>
        </form>
    </div>

    <div class="container">
        <h2>表格示例</h2>
        <table>
            <thead>
                <tr>
                    <th>ID</th>
                    <th>姓名</th>
                    <th>邮箱</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>张三</td>
                    <td>zhangsan@example.com</td>
                    <td><a href="#" class="edit-link" data-id="1">编辑</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>李四</td>
                    <td>lisi@example.com</td>
                    <td><a href="#" class="edit-link" data-id="2">编辑</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>王五</td>
                    <td>wangwu@example.com</td>
                    <td><a href="#" class="edit-link" data-id="3">编辑</a></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div class="container">
        <h2>嵌套元素</h2>
        <div class="nested-container">
            <div class="level-1">
                <p>第一层段落</p>
                <div class="level-2">
                    <p>第二层段落</p>
                    <div class="level-3">
                        <p>第三层段落</p>
                        <span class="special-text">这是一段特殊文本</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
